import React, { Component } from 'react'
import { Button, Card, Modal } from 'antd'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftjs from 'draftjs-to-html'
export default class RichText extends Component{
    state = {
        showRichText: false,
        editorContent: '',
        editorState: ''
    }
    handleClearContext = () => {
        this.setState({
            editorState: ''
        })
    }
    handleGetText = () => {
        this.setState({
            showRichText: true
        })
    }
    onEditorChange = (editorContent) => {   // 输入内容发生变化的时候触发的事件
        this.setState({
            editorContent
        })
    }
    onEditorStateChange = (editorState) => {  // 编辑内容的状态
        this.setState({
            editorState  
        })
    } 
    render() {
        const { editorContent, editorState } = this.state
        return (
            <div>
                <Card style={{marginTop: 10}}>
                    <Button type="primary" onClick={this.handleClearContext}>清空内容</Button>
                    <Button type="primary" onClick={this.handleGetText}>获取HTML文本</Button>
                </Card>
                <Card title="富文本编辑器">
                    <Editor 
                        editorState={editorState}
                        onContentStateChange={this.onEditorChange}
                        onEditorStateChange={this.onEditorStateChange} />
                </Card>
                <Modal
                    title="富文本"
                    visible={this.state.showRichText}
                    onCancel={() => {
                        this.setState({
                            showRichText: false
                        })
                    }}
                    footer={null}>
                        {draftjs(this.state.editorContent)}
                    </Modal>
            </div>
        )
    }
}

